<template>
  <div class="main">
    <el-row class="row" :gutter="4">
      <el-col :span="4" class="col">
        <el-tree
          class="tree"
          :data="flowTree"
          :props="{ children: 'sons', label: 'label' }"
          :default-expand-all="true"
          :expand-on-click-node="false"
          @node-click="treeClick"
          highlight-current
        ></el-tree>
      </el-col>
      <el-col :span="20" class="col">
        <div class="header">
          <span style="margin-left: 20px">关键字</span>
          <el-input
            placeholder="请输入关键字"
            v-model="caseReq.keyword"
            style="width: 140px; margin-left: 10px"
            clearable
          ></el-input>
          <span style="text-align: right; margin-left: 10px">出险日期</span>
          <el-date-picker
            v-model="caseReq.accidentDates"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            style="margin-left: 10px; width: 240px"
          ></el-date-picker>
          <span style="text-align: right; margin-left: 10px">提交日期</span>
          <el-date-picker
            v-model="caseReq.createDates"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            style="margin-left: 10px; width: 240px"
          ></el-date-picker>
          <template v-if="caseReq.status == 100">
            <span style="text-align: right; margin-left: 10px">结案日期</span>
            <el-date-picker
              v-model="caseReq.endcaseDates"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              style="margin-left: 10px; width: 240px"
            ></el-date-picker>
          </template>
          <el-button
            type="primary"
            style="margin-left: 20px"
            size="small"
            @click="
              caseReq.pageIndex = 1
              getCases()
            "
          >
            搜索
          </el-button>
          <el-button
            plain
            type="primary"
            style="margin-left: 10px"
            size="small"
            @click="outputExcel"
          >
            导出报表
          </el-button>
        </div>
        <el-table
          style="overflow: auto"
          height="85%"
          :data="caseRes.Items"
          stripe
          border
          highlight-current-row
        >
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="案件信息" width="320">
            <template slot-scope="scope">
              <div>{{ scope.row.FLOW_Name }}</div>
              <div>
                案件状态：{{ scope.row.CS_StatusDesc }}{{ '   ' }}
                {{ scope.row.CS_AllowLog ? '允许添加日志' : '不允许添加日志'
                }}{{ '   ' }}
                {{
                  scope.row.CS_AllowExpense ? '允许差旅报销' : '不允许差旅报销'
                }}
              </div>
              <div>差旅性质：{{ scope.row.EXTY_EnumTxt }}</div>
              <div>
                [ID]流水号：[{{ scope.row.CS_ID }}]{{ scope.row.CS_No }}
              </div>
              <div v-if="scope.row.CS_InsureCmpCaseNo">
                报案号：{{ scope.row.CS_InsureCmpCaseNo }}
              </div>
              <div v-if="scope.row.CS_AppraiserCmpCaseNo">
                案件编号：{{ scope.row.CS_AppraiserCmpCaseNo }}
              </div>
              <div>案件名称：{{ scope.row.CS_DisplayName }}</div>
              <div>出险日期：{{ scope.row.CS_AccidentTime | formatDate }}</div>
              <div>提交时间：{{ scope.row.CS_CreateTime | formatDate }}</div>
              <div v-if="scope.row.CS_EndCaseDate">
                结案日期：{{ scope.row.CS_EndCaseDate | formatDate }}
              </div>
              <div v-if="scope.row.CS_AccidentAreaDesc">
                案发地区：{{ scope.row.CS_AccidentAreaDesc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="公司/人员信息" width="420">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Employees" :key="item.CSEP_ID">
                {{ item.CSEP_TypeDesc }}：{{
                  item.CCV_TargetID == curEmp.CCV_TargetID ? '' : item.CMP_Name
                }}{{ item.USR_Name ? '[' + item.USR_Name + ']' : '' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="案件开票" width="180">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Charges" :key="item.CSCG_ID">
                【{{ item.CHTY_EnumTxt }}】{{ item.CSCG_Fee }}元
              </div>
            </template>
          </el-table-column>
          <el-table-column label="案件成本" width="180">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Costs" :key="item.CSC_ID">
                【{{ item.CSC_Name }}】{{ item.CSC_Fee }}元
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="时间节点" width="220px">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Nodes" :key="item.CSN_ID">
                【{{ item.NDTY_EnumTxt }}】{{ item.CSN_Time | formatDate }}
              </div>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="任务" width="360">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Jobs" :key="item.CSJ_ID">
                【{{ item.CSJ_Name }}】时限:
                {{ scope.row.CSJ_LimitTime | formatDate }}【{{
                  item.USR_Name
                }}】
                {{ scope.row.CSJ_IsDone ? '完成时间：' : '未完成' }}
                <span v-if="scope.row.CSJ_DoneTime">
                  {{ scope.row.CSJ_DoneTime | formatDate }}
                </span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="220px">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="toForm(scope.row.CS_FormID)"
                  icon="el-icon-search"
                >
                  登记流程
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="toCaseInfoPage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  案件详情
                </el-button>
              </div>
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="toLogPage(scope.row.CS_ID)"
                  icon="el-icon-document"
                >
                  公估日志
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="toCostPage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  成本管理
                </el-button>
              </div>
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="toContributionPage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  案件贡献
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="toIncomePage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  案件应付
                </el-button>
              </div>
              <div>
                <el-button
                  type="text"
                  size="small"
                  @click="toBillApplyPage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  开票管理
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="toJobPage(scope.row.CS_ID)"
                  icon="el-icon-coin"
                >
                  案件任务
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%; height: 40px">
          <el-pagination
            layout="total,prev,pager,next,sizes"
            style="float: right"
            background
            :current-page.sync="caseReq.pageIndex"
            :total="caseRes.Total"
            :page-size="caseReq.pageSize"
            :page-sizes="[10, 15, 20]"
            @size-change="
              (val) => {
                caseReq.pageSize = val
                getCases()
              }
            "
            @current-change="getCases()"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCases, getFlowTrees } from '@/api/core/case'
import { baseURL, empIdName, tokenName } from '@/config'
import axios from 'axios'
export default {
  data: function () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      flowTree: [],
      curFlow: null,
      caseReq: {
        flowId: null,
        keyword: '',
        accidentDates: [],
        createDates: [],
        endcaseDates: [],
        pageIndex: 1,
        pageSize: 10,
        status: null,
      },
      caseRes: {
        Items: [],
        Total: 0,
      },
    }
  },
  computed: {
    ...mapGetters({
      curEmp: 'user/curEmp',
    }),
  },
  methods: {
    toCaseInfoPage(caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    toForm: function (formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    toLogPage(caseId) {
      this.$router.push({
        name: 'caseLogPage',
        query: { caseId },
      })
    },
    toExpensePage(caseId) {
      this.$router.push({
        name: 'caseExpensePage',
        query: { caseId },
      })
    },
    toCostPage(caseId) {
      this.$router.push({
        name: 'caseCostPage',
        query: { caseId },
      })
    },
    toIncomePage(caseId) {
      this.$router.push({
        name: 'caseIncomePage',
        query: { caseId },
      })
    },
    toContributionPage(caseId) {
      this.$router.push({
        name: 'caseContributionPage',
        query: { caseId },
      })
    },
    toBillApplyPage(caseId) {
      this.$router.push({
        name: 'caseBillApplyPage',
        query: { caseId },
      })
    },
    toJobPage(caseId) {
      this.$router.push({
        name: 'caseJobPage',
        query: { caseId },
      })
    },
    treeClick(item) {
      this.curFlow = item.tag
      this.getCases()
    },
    getFlowTrees() {
      getFlowTrees().then(({ data }) => {
        this.flowTree = data
        this.getCases()
      })
    },
    getCases() {
      this.caseReq.flowId = this.curFlow?.FLOW_ID
      getCases(this.caseReq).then(({ data }) => {
        this.caseRes = data
      })
    },
    outputExcel() {
      if (
        !this.caseReq.keyword &&
        !this.caseReq.flowId &&
        this.caseReq.createDates.length == 0 &&
        this.caseReq.accidentDates.length == 0 &&
        this.caseReq.endcaseDates.length == 0
      ) {
        this.$message('请选择导出信息（关键字/提交日期/出险日期）')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Case/Case/OutputCaseExcel', this.caseReq, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '案件报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    this.caseReq.status = this.$route.meta.status
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getFlowTrees()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100%);
}
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
